<template>
  <div>
    <!--    查询功能-->
    <div style="margin-bottom: 5px">
      <!-- 输入学院id查询 -->
      <el-input v-model="parentId" @keyup.enter.native="ParentIdQuery" placeholder="请输入帖子类型的parentId"
        suffix-icon="el-icon-search" style="width: 250px; margin-left: 5px"></el-input>
      <!--      查询按钮-->
      <el-button type="primary" style="margin-left: 5px" @click="ParentIdQuery">parentId查询</el-button>
      <el-button type="primary" style="margin-left: 5px" @click="firstLevelPostQuery">一级帖子类别查询</el-button>
      <!--      重置按钮-->
      <el-button type="success" @click="resetParam">重置</el-button>
      <!--      新增按钮-->
      <el-button type="primary" style="margin-left: 5px" @click="add">新增</el-button>
    </div>

    <!--    列表展示-->
    <el-table :data="commentType" :header-cell-style="{ background: '#D3D3D3FF', color: '#555555' }">
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="帖子类型名称" width="160">
      </el-table-column>
      <el-table-column prop="gmtCreate" label="创建时间" width="180">
      </el-table-column>
      <el-table-column prop="gmtModified" label="修改时间" width="180">
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="60"> </el-table-column>
      <el-table-column prop="operate" label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="success" @click="mod(scope.row)">编辑</el-button>
          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red"
            title="这是一段内容确定删除吗？" @confirm="del(scope.row.id)" style="margin-left: 5px">
            <el-button slot="reference" size="small" type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--    列表展示-->
    <el-table :data="commentTypeLists" :header-cell-style="{ background: '#D3D3D3FF', color: '#555555' }">
      <el-table-column label="父类型名称" width="160">
        <template slot-scope="scope">
          {{ getParentName(scope.row.parentId) }}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID" width="180"> </el-table-column>
      <el-table-column prop="name" label="帖子类型名称" width="160">
      </el-table-column>
      <el-table-column prop="gmtCreate" label="创建时间" width="180">
      </el-table-column>
      <el-table-column prop="gmtModified" label="修改时间" width="180">
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="60"> </el-table-column>
      <el-table-column prop="operate" label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="success" @click="mod(scope.row)">编辑</el-button>
          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red"
            title="这是一段内容确定删除吗？" @confirm="del(scope.row.id)" style="margin-left: 5px">
            <el-button slot="reference" size="small" type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="帖子类型信息" :visible.sync="centerDialogVisible" width="30%" center :before-close="handleClose">
      <!--      新增或者修改类型信息表单-->
      <el-form ref="form" :rules="rules" :model="form" label-width="120px">
        <el-form-item label="帖子类型名称" prop="name">
          <el-col :span="15">
            <el-input v-model="form.name"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="父类型">
          <el-select v-model="form.parentId" placeholder="请选择父类型" readonly>
            <el-option v-for="item in commentType" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-radio-group v-model="form.sort">
            <el-input-number v-model="form.sort" controls-position="right" @change="handleChange"
              :min="0"></el-input-number>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { del } from "@/api/q&aService/postTypeManagement/Delete";
import { addOrUpdate } from "@/api/q&aService/postTypeManagement/addOrUpdate";
import { firstLevelPostQuery } from "@/api/q&aService/postTypeManagement/firstLevelPostQuery";
import { queryParentId } from "@/api/q&aService/postTypeManagement/queryParentId";
import { queryAll } from "@/api/q&aService/postTypeManagement/queryAll";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "postTypeManagement",
  data() {
    return {
      num: 1,
      List: [],
      commentType: [],
      commentTypeLists: [],
      page: 1,
      limit: 5,
      total: 0,
      parentId: "",
      centerDialogVisible: false,
      id: "",
      form: {
        id: "",
        name: "",
        parentId: "",
        sort: 0,
      },
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        parentId: [{ required: true, trigger: "blur" }],
        sort: [{ required: true, trigger: "blur" }],
      },
    };
  },
  methods: {
    //将父类型id换成父类型名称，方便查看
    getParentName(parentId) {
      const parent = this.commentType.find((c) => c.id === parentId);
      return parent.name
    },
    //排序的计数
    handleChange(value) {
      console.log(value);
    },
    //重置表单
    resetForm() {
      this.$refs.form.resetFields();
      //将计数器的数字重置为1
      this.num = 1;
    },

    //新增按钮
    add() {
      this.centerDialogVisible = true;
      this.$nextTick(() => {
        this.resetForm();
      });
    },
    //修改
    mod(row) {
      this.centerDialogVisible = true;
      this.$nextTick(() => {
        //赋值到表单
        this.id = row.id;
        this.form.id = row.id;
        this.form.name = row.name;
        this.form.parentId = row.parentId;
        this.form.sort = row.sort;
      });
    },
    //删除
    del(id) {
      del(id).then((res) => {
        if (res.code === 20000) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.centerDialogVisible = false;
          this.queryAll();
          this.delCommentTypeList(id);
        } else {
          this.$message({
            message: "删除失败",
            type: "error",
          });
        }
      });
    },
    doMod() {
      addOrUpdate(this.form).then((res) => {
        if (res.code === 20000) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.centerDialogVisible = false;
          this.queryAll();
          this.modCommentType(this.form.id);
          this.modCommentTypeLists(this.form.id, this.form.parentId);
          this.resetForm();
        } else {
          this.$message({
            message: "修改失败",
            type: "error",
          });
        }
      });
    },
    doSave() {
      addOrUpdate(this.form).then((res) => {
        if (res.code === 20000) {
          this.$message({
            message: "增加成功",
            type: "success",
          });
          this.centerDialogVisible = false;
          this.queryAll(this.form.parentId);
          this.resetForm();
        } else {
          this.$message({
            message: "增加失败",
            type: "error",
          });
        }
      });
    },
    //提交数据到后台
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.id) {
            //如果有id则修改
            this.doMod();
          } else {
            //否则增加
            this.doSave();
          }
        } else {
          this.$message({
            message: "操作失败",
            type: "error",
          });
          return false;
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => { });
    },
    resetParam() {
      this.form.parentId = "";
      this.queryAll();
    },
    firstLevelPostQuery() {
      firstLevelPostQuery().then((res) => {
        if (res.code === 20000) {
          this.commentType = res.data.parentList;
        } else {
          alert("获取数据失败");
        }
      });
    },
    queryAll(parentId) {
      queryAll().then((res) => {
        if (res.code == 20000) {
          this.List = res.data.List;
          //父类型
          if (this.commentType.length == 0) {
            this.List.forEach(item => {
              this.commentType.push(item.commentType);
            });
          } else if (this.commentType.length < res.data.List.length) {
            this.commentType.push(res.data.List[res.data.List.length - 1].commentType)
          } else if (this.commentType.length > res.data.List.length) {
            this.commentType.pop(this.commentType[this.commentType.length - 1].commentType)
          }
          //子类型
          if (this.commentTypeLists.length == 0) {
            this.List.forEach(item => {
              item.commentTypeList.forEach(item => {
                this.commentTypeLists.push(item);
              })
            });
          } else {
            this.List.forEach(item => {
              if (item.commentType.id == parentId) {
                this.commentTypeLists.push(item.commentTypeList[item.commentTypeList.length - 1])
              }
            });
          }
        }
      })
    },
    delCommentTypeList(delId) {
      for (let i = this.commentTypeLists.length - 1; i >= 0; i--) {
        if (this.commentTypeLists[i].id == delId) {
          this.commentTypeLists.splice(i, 1); // 删除索引为 i 的元素
        }
      }
    },
    //修改子类型
    modCommentTypeLists(modId, parentId) {
      for (let i = this.commentTypeLists.length - 1; i >= 0; i--) {
        if (this.commentTypeLists[i].id == modId) {
          this.commentTypeLists.splice(i, 1); // 删除索引为 i 的元素
        }
      }
      queryAll().then((res) => {
        if (res.code == 20000) {
          this.List = res.data.List;
          //子类型
          this.List.forEach(item => {
            if (item.commentType.id == parentId) {
              this.commentTypeLists.push(item.commentTypeList[item.commentTypeList.length - 1])
            }
          });
        }
      })
    },
    //修改父类型
    modCommentType(id) {
      queryAll().then((res) => {
        if (res.code == 20000) {
          this.List = res.data.List;
          //父类型
          for (let i = this.List.length - 1; i >= 0; i--) {
            if (this.List[i].commentType.id == id) {
              this.commentType.splice(i, 1); // 删除索引为 i 的元素
              this.commentType.push(res.data.List[i].commentType);
            }
          }
        }
      })

    },
    ParentIdQuery() {
      queryParentId(this.parentId).then((res) => {
        if (res.code == 20000) {
          this.commentTypeList = res.data.sonList;
        }
      });
    },
  },
  beforeMount() {
    this.queryAll()
  },
};
</script>

<style scoped>
.pagination-wrapper {
  position: fixed;
  bottom: 0;
  width: 100%;
  /*background-color: #f5f5f5;*/
  padding: 10px 20px;
  /*box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-container {
  max-width: 800px;
  /* 设置最大宽度以避免在大屏幕上过分拉伸 */
  margin: 0 30%;
  /* 居中显示分页组件 */
}
</style>
